<template>
  <div id="planCalendar"/>
</template>

<script lang="ts" setup>
import { onMounted, watch } from 'vue'
import { Calendar, DateSelectArg, EventClickArg } from '@fullcalendar/core'
import { initCommonCalendar, initMobileCalendar } from '@/utils/home/planUtil.ts'
import { usePlanStore } from '@/store/plan.ts'
import { isMobile } from 'vue3-common/utils/layoutUtil'

let calendar: Calendar | undefined

const planStore = usePlanStore()

onMounted(() => {
  initCalendar()
})

watch(() => planStore.isRefresh, () => {
  getCalendarEvent()
})

/**
 * 初始化日程
 */
const initCalendar = async () => {
  const calendarEl = document.getElementById('planCalendar') as HTMLElement

  if (isMobile()) {
    calendar = initMobileCalendar(calendarEl, selectDateEvent, eventClickEvent, updateDateEvent)
  } else {
    calendar = initCommonCalendar(calendarEl, selectDateEvent, eventClickEvent, updateDateEvent)
  }
  calendar.render()
}

/**
 * 获取排班事件
 */
const getCalendarEvent = () => {
  if (calendar) {
    calendar.removeAllEvents()

    planStore.planList.forEach((item) => {
      if (item.date) {
        calendar?.addEvent({
          start: `${item.date} ${item.startTime}`,
          end: `${item.date} ${item.endTime}`,
          title: item.title
        })
      }
    })

    calendar.refetchEvents()
  }
}

/**
 * 更新日期事件 重新获取内容
 */
const updateDateEvent = async (dateInfo) => {

}

/**
 * 选择日期事件
 * @param dateSelect 日期选择
 */
const selectDateEvent = (dateSelect: DateSelectArg) => {

}

/**
 * 点击日程事件
 * @param eventClick 点击事件
 */
const eventClickEvent = (eventClick: EventClickArg) => {
  // const anniversary = formatDate(eventClick.event.start as Anniversary)
  // const beginTime = formatDate(eventClick.event.start as Anniversary, 'HH:mm')
  // const endTime = formatDate(eventClick.event.end as Anniversary, 'HH:mm')
}
</script>

<style lang="scss">
@import "@/styles/home.variable.module";

$cell-height: 3.8vh;
$time-slot-width: 70px;
$month-cell-height: 120px;

#planCalendar {
  height: 100%;
  background-color: var(--color-card-bg);
  border-radius: 15px;
  // box-shadow: 3px 3px 3px #CFCFCF;
  padding: 10px;

  // 标题区域
  .fc-header-toolbar {
    // margin-bottom: 4vh;

    // 按钮区域
    .fc-button-group, .fc-toolbar-chunk {
      .fc-button-primary {
        background-color: var(--color-record-card-bg);
        border: none;
        color: var(--color-text);
      }

      .fc-button-active {
        background-color: $theme-color;
        color: #FFFFFF;
      }
    }
  }

  // 通用内容区域
  .fc-view {
    border: none;
    height: calc(100vh - 260px);
    overflow: auto;

    // 表格边框线
    table, td, th {
      // border-top: 0;
      // border-left: 0;
      // border-right: 0;
      // border-bottom: 0;
    }

    // 主体区域
    .fc-scrollgrid {
      table-layout: auto;
      text-align: center;

      // 左侧时间线
      col {
        width: $time-slot-width !important;
        text-align: center;
      }

      // 表头区域
      .fc-col-header {
        color: $theme-color;
        height: 50px;
        font-size: 1.4rem;
        background-color: var(--color-record-card-bg);

        th {
          vertical-align: middle;
        }

        // 表格边框线
        table, td, th {
          border: none;
        }

        // 内容
        .fc-col-header-cell-cushion {
          // 超出2行省略号
          white-space: pre-wrap;
          word-wrap: break-word;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }

      // 内容区域
      .fc-timegrid-body {
        // 单元格高度
        tr {
          height: $cell-height;
        }

        // 表格行
        .fc-timegrid-slots {
          // label(时间轴)
          .fc-timegrid-slot-label {
            font-size: 1.2rem;

            .fc-timegrid-slot-label-frame {
              text-align: center;
            }
          }
        }
      }

      // 事件方块内容
      .fc-event {
        span {
          color: #FFFFFF;
          // 最多显示几个字符
          width: 6em;
          overflow: hidden;
          // 省略号
          text-overflow: ellipsis;
          // 不换行
          white-space: nowrap;
        }

        // 时间
        .fc-event-time {
          color: #FFFFFF;
        }

        .fc-event-time::after {
          content: none;
        }

        // 标题
        .fc-event-title {
          color: #FFFFFF;
          // 最多显示几个字符
          width: 7em;
          overflow: hidden;
          // 省略号
          text-overflow: ellipsis;
          // 不换行
          white-space: nowrap;
        }

        // 方块内容
        .fc-event-main-frame {
          justify-items: center;
          align-items: center;
          .fc-event-time {
            font-size: 1rem;
          }

          .fc-event-title {
            font-size: 1.2rem;
          }
        }
      }
    }
  }

  // 悬浮框
  .fc-popover {
    .fc-popover-body {
      .fc-event {
        .fc-event-time {
          color: #FFFFFF;
        }

        .fc-event-title {
          color: #FFFFFF;
          font-size: 1rem;
        }
      }

      .fc-event:hover {
        background-color: #009FA8;
      }
    }
  }

  // 月视图
  .fc-dayGridMonth-view {
    // 主体区域
    .fc-scrollgrid {
      .fc-daygrid-body {
        // 单元格高度
        td {
          // height: 6vh;
        }

        // 月视图中的每日事件方块
        .fc-daygrid-day-frame {
          .fc-daygrid-day-events {
            .fc-daygrid-event-harness {
              .fc-event {
                background-color: #009FA8;
              }

              .fc-event:hover {
                // background-color: #009FA8;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  #planCalendar {
    .fc-header-toolbar {
      .fc-toolbar-title {
        font-size: 1.2rem;
      }
    }

    // 通用内容区域
    .fc-view {
      // 主体区域
      .fc-scrollgrid {
        // 表头区域
        .fc-col-header {
          font-size: 1rem;
        }

        // 内容区域
        .fc-timegrid-body {
          // 表格行
          .fc-timegrid-slots {
            // label(时间轴)
            .fc-timegrid-slot-label {
              font-size: 1rem;
            }
          }
        }

        // 事件方块内容
        .fc-event {
          // 方块内容
          .fc-event-main-frame {
            .fc-event-time {
              font-size: 0.8rem;
            }

            .fc-event-title {
              font-size: 0.8rem;
            }
          }
        }
      }
    }
  }
}
</style>
